.xgplayer-skin-default {
  .xgplayer-pip {
    order: 9;
    position: relative;
    outline: none;
    display: block;
    cursor: pointer;
    // margin-left: 10px;
    // margin-top: 9px;
    // margin-bottom: 11px;
    height: 20px;
    top: 8px;
    .name {
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      line-height: 20px;
      height: 20px;
      color: $definitionNameColor;
      span{
        width: 60px;
        height: 20px;
        line-height: 20px;
        background: $definitionNameBgColor;
        border-radius: 10px;
        display:inline-block;
        vertical-align:middle;
      }
    }
  }

  .xgplayer-pip-lay{
    position: absolute;
    top: 26px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 130;
    cursor: pointer;
    background-color: transparent;
    display: none;
    div{
      width: 100%;
      height: 100%;
    }
  }

  .xgplayer-pip-drag{
    cursor: move;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26px;
    line-height: 26px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    z-index: 130;
    display: none;
  }
}

.xgplayer-skin-default.xgplayer-pip-active {
  position: fixed;
  right: 0;
  bottom: 200px;
  width: 320px !important;
  height: 180px !important;
  z-index: 110 !important;
  .xgplayer-controls {
    display: none;
  }
  .xgplayer-danmu {
    display: none;
  }
  .xgplayer-pip-lay{
    display: block;
  }
}

.xgplayer-skin-default.xgplayer-pip-active {
  .xgplayer-pip-drag {
    display: flex;
  }
}

.xgplayer-skin-default.xgplayer-inactive {
  .xgplayer-pip-drag {
    display: none;
  }
}
.lang-is-jp {
  .xgplayer-pip {
    .name {
      span{
        width: 70px;
        height: 20px;
      }
    }
  }
}
